<template>
	<el-dialog
	  :visible.sync="parDialog"
	  class="parDialog"
	  >
		<h3 class="title"><span></span>认证详情</h3>
		<div class="info">
			<h3>基本信息</h3>
			<p>姓名：<span>{{options.name}}</span></p>
			<p>身份证号：<span>{{options.id}}</span></p>
			<p>户籍：<span>{{options.register}}</span></p>
			<p>现住址：<span>{{options.presentAddress}}</span></p>
		</div>
		<ul class="passportImg clearfix">
			<h3>证件照</h3>
			<li class="passport" v-for="(item,index) in options.imgList" :key='index'>
				<img :src="item.src" alt="证件照">
			</li>
		</ul>
		<div class="contract">
			<h3>合同内容</h3>
			<div class="con-details" style="background-color: #F5F5F5;border-radius: 6px;overflow: hidden;">
				<div style="width: 90%;margin: 30px auto;background-color: #fff;border-radius: 4px;overflow: hidden;">
					<ul style="list-style: none;margin: 20px 30px;color: #000;font-size: 18px;padding: 0;">
						<li style="line-height: 40px;">甲方：{{options.xxx}}</li>
						<li style="line-height: 40px;">地址：{{options.xxx}}</li>
					</ul>
					<ul style="list-style: none;margin: 20px 30px;color: #000;font-size: 18px;padding: 0;">
						<li style="line-height: 40px;">乙方：{{options.xxx}}</li>
						<li style="line-height: 40px;">身份证：{{options.xxx}}</li>
						<li style="line-height: 40px;">身份证-住址：{{options.xxx}}</li>
						<li style="line-height: 40px;">暂住地：{{options.xxx}}</li>
					</ul>
					<div style="margin: 20px 30px;color: #000;font-size: 18px;">
						<p>合同内容：</p>
						<div class="content">{{options.xxx}}</div>
					</div>
					<div style="margin: 20px 30px;color: #000;font-size: 18px;overflow: hidden;">
						<ul style="list-style: none;float: left;width: 50%;padding: 0;">
							<li style="line-height: 40px;">甲方：{{options.xxx}}</li>
							<li style="line-height: 40px;">签约发起日期：{{options.xxx}}</li>
							<li style="position: relative;height: 200px;">公章认证处：
								<img src="../../assets/img/公章.png" style="position: absolute;width: 180px;height: 180px;left: 25%;top: 0;">
							</li>
						</ul>
						<ul style="list-style: none;float: right;width: 50%;padding: 0;">
							<li style="line-height: 40px;">乙方：{{options.xxx}}</li>
							<li style="line-height: 40px;">签约日期：{{options.xxx}}</li>
							<li style="line-height: 40px;">签名处：{{options.xxx}}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="detBtn" @click="handleWindowPrint('.con-details','合同内容')">
			<span>合同导出</span>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type:Object,
			require:true
		}
	},
	data(){
		return {
			parDialog:false
		}
	},
	methods:{
		close(){
			this.parDialog = false;
		},
		open(){
			this.parDialog = true;
		},
		handleWindowPrint (ele, fileName) {
			document.head.innerHTML = '<meta charset="utf-8">\n' +
			  ' <title> ' + fileName + '</title>\n' +
			  ' <meta name="format-detection" content="telephone=no">\n' +
			  ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
			  ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' ;
			document.body.innerHTML = document.querySelector(ele).outerHTML
			setTimeout(() => {
			  // 打印
			  window.print()
			// 刷新页面
			  window.location.reload()
			}, 20);
		  },
	}
}
</script>

<style scoped="scoped">
.parDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.parDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}
.parDialog .info,.passportImg,.contract,.con-details{
	margin: 20px 30px;
}
.parDialog .info h3,.passportImg h3,.contract h3{
	font-size: 15px;
	font-weight: bold;
	line-height: 30px;
}
.parDialog .info p{
	padding-left: 30px;
	font-size: 12px;
	line-height: 30px;
	color: #A1A1A1;
}
.parDialog .info p span{
	color: #000;
}
.passport{
	float: left;
	margin: 15px 30px;
}
.passport img{
	width: 300px;
	height: 200px;
}
.detBtn{
	text-align: center;
	padding: 30px;
}
.detBtn span{
	display: inline-block;
	font-size: 14px;
	width: 150px;
	height: 40px;
	line-height: 40px;
	border-radius: 6px;
	background-color: #FF293F;
	color: #fff;
	
}
</style>
